<template>
	<view class="cont">
		<view class="u-p-t-24">
			<swiper 
				class="swiper" 
				style="height: 290rpx;"
				:autoplay="false"
				previous-margin="24rpx"
				next-margin="24rpx">
				<swiper-item 
					v-for="(item, index) in list" :key="index"
					@click="toOpen(index)">
					<view class="swiper-item text-white u-p-l-12 u-p-r-12">
						<u-image
							width="100%"
							height="290"
							border-radius="10"
							mode="aspectFill"
							:src="item.image"></u-image>
						<view class="swiper-title">
							<view class="u-flex u-col-center">
								<view class="title text-bold">{{item.title}}</view>
							</view>
							<view>
								购买享受<text class="text-bold u-font-28 u-p-l-6 u-p-r-6">{{item.rate}}</text>折优惠 <text class="u-m-l-16 text-bold u-font-28">{{item.money}}</text>元/年
							</view>
						</view>
						<view class="swiper-desc">
							优先<text class="text-bold u-p-l-6 u-p-r-6">{{item.minutes}}</text>收到提醒
						</view>
						<u-tag class="icon-tag" mode="plain" text="立即开通" bg-color="transparent" color="#fff" />
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="u-p-24 u-m-t-10">
			<view class="u-font-32 text-bold">企业宗旨</view>
			<view class="bg-white radius12 u-p-24 u-m-t-24">
				<view class="desc">
					***致力于提供精准商机，帮助企业拓展销售线索。平台服务
					致力于提供精准商机，帮助企业拓展销售线索。平台服务
					致力于提供精准商机，帮助企业拓展销售线索。平台服务
				</view>
			</view>
		</view>
		<view class="u-p-24 u-m-t-10">
			<view class="u-font-32 text-bold">金牌会员其他可选服务</view>
			<view class="bg-white radius12 u-p-24 u-m-t-24">
				<view class="text-warning text-bold">
					<u-icon name="thumb-up-fill" size="32"></u-icon>
					<text class="u-p-l-10">企业店铺服务</text>
				</view>
				<view class="u-m-t-24 desc">
					如您有产品宣传的需求，我们可以为您如您有产品宣传的需求，
					我们可以为您如您有产品宣传的需求，我们可以为您如您有产品宣传的需求，我们可以为您
					如您有产品宣传的需求，我们可以为您如您有产品宣传的需求，我们可以为您传的需求，我们可以为您
				</view>
				<view class="u-text-right text-primary u-p-t-14">
					点击查看：企业店铺服务
				</view>
			</view>
			<view class="bg-white radius12 u-p-24 u-m-t-24">
				<view class="text-warning text-bold">
					<u-icon name="thumb-up-fill" size="32"></u-icon>
					<text class="u-p-l-10">企业店铺小程序</text>
				</view>
				<view class="u-m-t-24 desc">
					如您有产品宣传的需求，我们可以为您如您有产品宣传的需求，
					我们可以为您如您有产品宣传的需求，我们可以为您如您有产品宣传的需求，我们可以为
				</view>
				<view class="u-text-right text-primary u-p-t-14">
					点击查看：企业店铺小程序
				</view>
			</view>
			<view class="bg-white radius12 u-p-24 u-m-t-24">
				<view class="text-warning text-bold">
					<u-icon name="thumb-up-fill" size="32"></u-icon>
					<text class="u-p-l-10">首页广告位服务</text>
				</view>
				<view class="u-m-t-24 desc">
					如您有产品宣传的需求，我们可以为您如您有产品宣传的需求，
					我们可以为您如您有产品宣传的需求，我们可以为您如您有产品宣传的需求，我们可以为
				</view>
				<view class="u-text-right text-primary u-p-t-14">
					点击查看：首页广告位服务
				</view>
			</view>
		</view>
		
		<comBottom />
	
		<u-modal 
			v-model="show" 
			show-cancel-button 
			title="开通会员"
			confirm-text="立即充值"
			ref="uModal" 
			:async-close="true"
			:confirm-color="infoColorError"
			@confirm="confirm">
			<view class="slot-content u-p-24 u-font-24">
				<view class="u-flex u-m-t-24 u-font-28">
					<view>充值：</view>
					<view>
						<u-input :custom-style="{width: '200rpx'}" :value="params.money" :border="true" disabled />
					</view>
					<view class="u-p-l-24">元/年</view>
				</view>
				<view class="u-m-t-24 text-bold">
					<view>开通{{params.title}}, 扣除年费{{params.money}}, 余额{{'0'}}</view>
					<view>有效期至：2022-05-16</view>
				</view>
				<view class="text-error u-font-20 u-p-t-30 u-text-center">
					<u-divider color="#fa3534">金牌会员开通后不可退出</u-divider>
				</view>
				<view class="remark u-tips-color u-p-t-30">备注：此服务不是包年服务</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
import levelImage from '../../static/level_01.png'
import levelImage2 from '../../static/level_02.png'
import levelImage3 from '../../static/level_03.png'
export default {
	data() {
		return {
			currentIndex: 0,
			params: {},
			list: [
				{
					image: levelImage,
					title: '金牌会员V1',
					rate: 9.5,
					minutes: '30秒',
					money: 599
				},
				{
					image: levelImage2,
					title: '金牌会员V2',
					rate: 9,
					minutes: '1分钟',
					money: 999
				},
				{
					image: levelImage3,
					title: '金牌会员V3',
					rate: 8,
					minutes: '3分钟',
					money: 1999
				}
			],
			show: false,
			value: ''
		}
	},
	onLoad(options) {
	},
	methods: {
		toOpen(index) {
			this.currentIndex = index
			this.params = this.list[index]
			this.show = true
		},
		confirm() {
			setTimeout(() => {
				// 3秒后自动关闭
				this.show = false;
				// 如果不想关闭，而单是清除loading状态，需要通过ref手动调用方法
				// this.$refs.uModal.clearLoading();
			}, 3000)
		}
	}
}
</script>

<style lang="scss" scoped>
.cont {
	overflow-x: hidden;
	min-height: 100vh;
	.desc {
		line-height: 48rpx;
	}
}
.swiper {
	&-title {
		position: absolute;
		top: 24rpx;
		left: 40rpx;
		.title {
			font-size: 40rpx;
		}
		.icon-tag {
			padding: 6rpx;
			transform: scale(.8);
		}
	}
	&-desc {
		position: absolute;
		bottom: 24rpx;
		left: 40rpx;
	}
	.icon-tag {
		font-size: 32rpx;
		font-style: italic;
		font-weight: 700;
		padding: 18rpx 20rpx;
		position: absolute;
		bottom: 30rpx;
		right: 40rpx;
	}
}
</style>
